<template>
	<zui-box>
		<!-- 头部导航 -->
		<zui-navbar title='支付页面'></zui-navbar>
		<u-gap height="65rpx"></u-gap>
		<view class="qrcode"  @click="preview(image)">
			<image :src="image" ></image>
		</view>
		<u-gap height="36rpx"></u-gap>
		<view class="text">
			扫二维码支付
		</view>
		<u-gap height="60rpx"></u-gap>
		
		<view class="upImg_box">
			<view class="up_img" @click="upimgs">
				<image src="../../static/img/up_img_bank.png" class="noimg" mode="" v-if="!payment_voucher"></image>
				<image :src="httpPath + payment_voucher" mode="" v-else></image>
			</view>
		</view>
		
		<zui-button bgColor="#AA334F"  @fun='save' >提交</zui-button>
		
		
	</zui-box>
</template>

<script>
	export default {
		data() {
			return {
				image:'',
				pay_type:'',
				order_id:'',
				payment_voucher: '',
				module_id:'',
			};
		},
		//页面加载完毕
		onLoad(e) {
			console.log(e);
			this.pay_type = e.pay_type;
			this.order_id = e.order_id;
			this.module_id = e.module_id;
		
		},
		//每次进入页面
		onShow() {
			//获取接口
			this.get_info();
		},
		
		methods: {
		upimgs() {
			let that = this;
			uni.chooseImage({
				count: 1,
				sourceType: ['album '],
				success: res => {
					const tempFilePaths = res.tempFilePaths[0];
					console.log(tempFilePaths);
					uni.showLoading({
						title: '上传中'
					});
					uni.uploadFile({
						url: `${that.httpPath}/app/tool/uploadImage`,
						filePath: tempFilePaths,
						name: 'image',
						success: res => {
							uni.hideLoading();
							let data = JSON.parse(res.data);
							if (data.code == 1) {
								this.payment_voucher = `${data.data}`;
							} else {
								uni.showToast({
									title: data.msg,
									icon: 'none',
									duration: 2000
								});
							}
						},
						fail: err => {
							uni.hideLoading();
							uni.showToast({
								icon: 'none',
								title: '上传失败'
							});
						}
					});
				}
			});
		},
			get_info() {
				uni.$u.http
					.get('/app/setting/getSingle?group=recharge&key=receipt_qr_code', {
						params: {},
						custom: {
							auth: true,
							toast: true,
							catch: true
						}
					})
					.then(res => {
						this.image = res.value;
					})
					.catch(err => {});
			},
			
			save() {
				
				if (!this.payment_voucher) return this.say('请上传支付凭证');
				
				// uni.showLoading({
				// 	title: '支付中...'
				// });
				uni.$u.http
					.post(
						'/app/order_goods/pay',
						{
							pay_type: '1',
							order_id: this.order_id*1,
							password:'',
							bank_image: this.payment_voucher
						},
						{
							params: {},
							custom: {
								auth: true,
								toast: true,
								catch: true
							}
						}
					)
					.then(res => {
						console.log(res.order.order_id);
					
						
						
						uni.$u.route('/pages/index/bank_win', {
							order_id:this.order_id,
							module_id:this.module_id
						});
						
						// actual_price: "1100.00"
						// body: "商城购物"
						// order_id: 70
						// pay_type: 1
						// total_price: "1100.00"
						// type: "bank"
						
						
						
						// this.app_wx_ali_pay(res.non_str);
						// if (this.type.indexOf('_app') != -1) {
						// 	console.log('app支付');
						// } else if (this.type.indexOf('_h5') != -1) {
						// 	console.log('h5支付');
						// 	this.payment_voucher = '';
						// 	this.recharge_num = '';
						// 	this.web_pay(res.non_str)
						// } else if (this.type.indexOf('bank') != -1) {
						// 	console.log('bank支付');
						// }
					
					})
					.catch(err => {
						uni.hideLoading();
					});
			},
			
		}
	}
</script>

<style lang='scss' scoped>
.qrcode{
	width: 560rpx;
	height: 560rpx;
	margin: 0 auto;
	image{
		width: 100%;
		height: 100%;
	}
}
.text{
	font-size: 32rpx;
	color: #fff;
	text-align: center;
}
.upImg_box{
	display: flex;
	padding: 60rpx;
	justify-content: center;
	.left{
		width: 292rpx;
		height: 292rpx;
		flex-shrink: 0;
		image{
			width: 100%;
			height: 100%;
		}
	}
}


.up_img {
	width: 100%;
	padding: 30rpx 30rpx 0;
	box-sizing: border-box;
	min-height: 200rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	.noimg {
		width: 300rpx;
		height: 300rpx;
	}
	image {
		max-width: 90%;
		min-width: 300rpx;
		min-height: 300rpx;
	}
}
</style>
